<template>
	<view class="container">
		<view class="title">贪吃蛇小游戏</view>
		<view class="btn-start" @click="startGame">开始游戏</view>
		<view class="game-info">
			<view class="intro-title">游戏说明：</view>
			<view class="intro-item">1.通过点击屏幕上、下、左、右区域控制蛇的移动方向</view>
			<view class="intro-item">2.吃到食物可以增加长度和分数</view>
			<view class="intro-item">3.撞到墙壁或自己的身体游戏结束</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods:{
			startGame() {
				uni.navigateTo({
					url:'/pages/game/game'
				})
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
		height: 100vh;
		background: linear-gradient(135deg, #aecdea 0%, #67a7ec 100%);
		position: relative;
		overflow: hidden;
	}
	
	.container::before {
		content: "";
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
		transform: rotate(30deg);
		animation: liquidEffect 15s infinite alternate;
	}
	
	@keyframes liquidEffect {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	.title {
		font-size: 56rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 60rpx;
		text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
		position: relative;
		z-index: 1;
		letter-spacing: 2rpx;
	}
	
	.btn-start {
		width: 320rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10px);
		color: #fff;
		border-radius: 50rpx;
		font-size: 36rpx;
		margin-bottom: 60rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		position: relative;
		z-index: 1;
		overflow: hidden;
	}
	
	.btn-start::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
		transform: translateX(-100%);
		transition: all 0.6s ease;
	}
	
	.btn-start:active {
		transform: scale(0.95);
	}
	
	.btn-start:active::before {
		transform: translateX(100%);
	}
	
	.game-info {
		width: 90%;
		padding: 40rpx;
		background: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(15px);
		border-radius: 30rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		position: relative;
		z-index: 1;
	}
	
	.intro-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		color: #fff;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}
	
	.intro-item {
		font-size: 30rpx;
		color: rgba(255, 255, 255, 0.9);
		line-height: 1.8;
		margin-bottom: 15rpx;
		position: relative;
		padding-left: 40rpx;
	}
	
	.intro-item::before {
		content: "•";
		position: absolute;
		left: 10rpx;
		color: #fff;
		font-size: 40rpx;
	}
	
	/* 平板适配 */
	@media (min-width: 768px) {
		.container {
			padding: 80rpx;
		}
		
		.title {
			font-size: 72rpx;
			margin-bottom: 80rpx;
		}
		
		.btn-start {
			width: 400rpx;
			height: 120rpx;
			line-height: 120rpx;
			font-size: 42rpx;
			margin-bottom: 80rpx;
		}
		
		.game-info {
			width: 80%;
			max-width: 600rpx;
			padding: 50rpx;
		}
		
		.intro-title {
			font-size: 42rpx;
		}
		
		.intro-item {
			font-size: 36rpx;
		}
	}
</style>